<template>
	<view>
		<u-navbar title="账户余额" :status-bar="false" safe-area-inset-top @leftClick="leftClick" :placeholder="true"
			:autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="close" size="19"></u-icon>
			</view>
		</u-navbar>
		<view class="page">
			<view class="postionAll">
				<view class="top">
					<view class="top-text">余额（元）</view>
					<view class="top-text" @click="toBill">账单</view>
				</view>
				<view class="middle">
					<view class="money">{{computenBalance()}} </view>
					<view class="shiming" @click="toRealNameAuth" v-if="!realAuthInfo || [3,4].includes(realAuthInfo.status)">
						<view class="shiming-text">去实名</view>
						<image src="/static/index/切图 11@2x.png" style="width: 14rpx;height: 26rpx;" mode=""></image>
					</view>
					<view class="shiming" v-if="realAuthInfo && ![3,4].includes(realAuthInfo.status)">
						<view class="shiming-text">已实名</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="bottom">
					<view class="bottom-top">
						<view class="bottom-top-text">余额明细</view>
						<view>
							<u-icon @click="$refs.balanceExplanation.init()" name="question-circle" color="#fff" size="20"></u-icon>
						</view>
					</view>
					<view class="bottom-line">
						<view class="bottom-line-top">
							<view class="bottom-line-top-left">
								<image src="/static/index/切图 12@2x.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
								<view class="bottom-line-top-text">微信充值余额：</view>
							</view>
							<view class="bottom-line-top-right">
								<view>￥{{Info.aucdeposit.depositBalance}}</view>
							</view>
						</view>
						<view class="bottom-line-top-tips" v-if="Info.aucdeposit.frozenAmount != '0.00'">( 含冻结：{{Info.aucdeposit.frozenAmount}} )</view>
					</view>
					<view class="bottom-line">
						<view class="bottom-line-top">
							<view class="bottom-line-top-left">
								<image src="/static/index/切图 13@2x.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
								<view class="bottom-line-top-text">公对公余额：</view>
							</view>
							<view class="bottom-line-top-right">
								<view>￥{{Info.aucdeposit.companyRechargeBalance}}</view>
							</view>
						</view>
						<view class="bottom-line-top-tips" v-if="Info.aucdeposit.companyRechargeFrozenAmount != '0.00'">( 含冻结：{{Info.aucdeposit.companyRechargeFrozenAmount}} )</view>
					</view>
					<view class="bottom-line">
						<view class="bottom-line-top">
							<view class="bottom-line-top-left">
								<image src="/static/index/切图 14@2x.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
								<view class="bottom-line-top-text">捷途公对公余额：</view>
							</view>
							<view class="bottom-line-top-right">
								<view>￥{{Info.aucdeposit.jietuCompanyRechargeBalance}}</view>
							</view>
						</view>
						<view class="bottom-line-top-tips" v-if="Info.aucdeposit.jietuCompanyRechargeFrozenAmount != '0.00'">( 含冻结：{{Info.aucdeposit.jietuCompanyRechargeFrozenAmount}} )</view>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item" @click="toAccountMan">
					<view class="menu-item-left">
						<image src="/static/index/切图 15@2x.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="menu-text">账号管理</view>
					</view>
					<view>
						<image src="@/static/index/right.png" style="width: 25rpx;height: 25rpx;" mode=""></image>
					</view>
				</view>
				<view class="menu-item" @click="toRecharge" v-if="showRechargeBtn">
					<view class="menu-item-left">
						<image src="/static/index/切图 17@2x.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="menu-text">充值</view>
					</view>
					<view>
						<image src="@/static/index/right.png" style="width: 25rpx;height: 25rpx;" mode=""></image>
					</view>
				</view>
				<view class="menu-item" @click="toWithdrawal" v-if="showWithdrawalBtn">
					<view class="menu-item-left">
						<image src="/static/index/切图 18@2x.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="menu-text">提现</view>
					</view>
					<view>
						<image src="@/static/index/right.png" style="width: 25rpx;height: 25rpx;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<popupCustomVue ref="popupCustomVue" title="实名认证说明" :content="shimingContent" btnName="马上认证"
			@customClick="handleClick" />
		<popupCustomVue ref="balanceExplanation" title="余额解释说明" :showCloseBtn="false" :content="balanceExplanation" btnName="关闭" />
	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.1.5.2.js";

	import popupCustomVue from "../../components/popup_custom.vue";

	import {
		hybridEncrypt
	} from "@/utils/crypto.js"

	export default {
		components: {
			popupCustomVue
		},
		data() {
			return {
				Info: {
					aucdeposit: {
						depositBalance: 0,
						frozenAmount: 0,
						companyRechargeBalance: 0,
						companyRechargeFrozenAmount: 0,
						jietuCompanyRechargeBalance: 0,
						jietuCompanyRechargeFrozenAmount: 0,
					},
					sHeight: 0,
					options: "",
					urlParams: this.$store.state.urlParams,
				},
				shimingContent: "",
				balanceExplanation: `一、余额解释说明：<br/>
				1、余额：余额=微信充值余额+公对公余额+捷途公对公余额；<br/>
				2、微信充值余额：使用微信充值的余额；<br/>
				3、公对公余额：打款给芜湖金桔科技有限公司对公账户的余额；<br/>
				4、捷途公对公余额：打款给北京智享乐通科技有限公司对公账户的余额；<br/>
				5、系统充值：特殊场景下，由系统虚拟充值的余额，此部分余额不可提现，不可支付；<br/>
				6、冻结：通过蜜蜂买卖车系统作为买家参拍或作为卖家卖车冻结的保证金，此部分余额不可提现，不可支付。`,
				showRechargeBtn: false, //是否显示充值入口
				showWithdrawalBtn: false, //是否显示充值入口
				realAuthInfo: null,
				JTH5_code_switch: false,
			}
		},
		async onLoad(options) {
			this.options = options
			this.options.brand = decodeURI(options.brand)
			this.options.name = decodeURI(options.name);
			uni.setStorageSync("user", hybridEncrypt(JSON.stringify({
				"key": "mifeng_jiecheng@r86xlsthhf3l4jm6gjx0zizs",
				...this.options
			})))
			if (options) {
				this.getCallinfoInfo(this.options);
			}
			this.getStatusHeight();
			this.shimingContent = await this.getAgreement("smrzsm");
			this.showRechargeBtn = await this.getDictOne("JTH5_reCharge") == 1;
			this.showWithdrawalBtn = await this.getDictOne("JTH5_withdrawal") == 1;
			this.JTH5_code_switch = await this.getDictOne("JTH5_code_switch") == 1;
		},
		async onShow() {
			if (Object.keys(uni.getStorageSync("urlParams")).length != 0) {
				this.getCallinfoInfo(uni.getStorageSync("urlParams"))
			}
			this.realAuthInfo = await this.realAuthDetail();
			if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
				this.$refs.popupCustomVue.init();
			}
		},
		methods: {
			leftClick() {
				webUni.postMessage({
					data: {
						type: "back",
						data: []
					},
				})
				uni.removeStorageSync("Info")
				uni.removeStorageSync("urlParams")
				uni.removeStorageSync("wxUserInfo")
			},
			computenBalance() {
				return ((Number(this.Info.aucdeposit.depositBalance) * 100 + Number(this.Info.aucdeposit
						.companyRechargeBalance) * 100 +
					Number(this.Info.aucdeposit.jietuCompanyRechargeBalance) * 100) / 100).toFixed(2)
			},
			async realAuthDetail() {
				let result = await this.api.realAuthDetail();
				return result.data.data;
			},
			// 计算距离顶部安全高度
			getStatusHeight() {
				this.sHeight = uni.getSystemInfoSync().statusBarHeight + 84 + 'px';
				console.log(this.sHeight);
			},
			//查询协议配置
			async getAgreement(code) {
				let result = await this.api.getAgreement(code);
				return result.data.data.content;
			},
			/**
			 * 查询账户信息
			 */
			getCallinfoInfo(options) {
				let params = {
					...options,
				}
				console.log(params);
				if (Object.keys(options).length != 0) {
					uni.setStorageSync("urlParams", options)
				}
				this.api.getCallinfoInfo(Object.keys(params).length == 0 ? uni.getStorageSync("urlParams") : params).then(
					res => {
						if (!res.data.data.erpCode) {
							uni.showModal({
								title: '提示',
								content: '未查询到相关信息！！',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										webUni.postMessage({
											data: {
												type: "back",
												data: []
											},
										})
									}
								}
							});
							return
						}
						this.Info = res.data.data;
						uni.setStorageSync("Info", res.data.data);
						uni.setStorageSync("wxUserInfo", {
							openId: res.data.data.openId,
							unionId: res.data.data.unionId,
							wxNickName: res.data.data.wxNickName,
						});
					})
			},
			//实名认证
			toRealNameAuth() {
				// this.$refs.popupCustomVue.init();
				// uni.navigateTo({
				// 	url: "/pages/realNameAuth/index"
				// })
				if (this.JTH5_code_switch) {
					uni.navigateTo({
						url: "/pages/authentication/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/realNameAuth/index"
					})
				}
			},
			//账号管理
			async toAccountMan() {
				this.realAuthInfo = await this.realAuthDetail();
				if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
					uni.$u.toast("您当前未实名，请先实名认证！")
					return;
				}
				uni.navigateTo({
					url: "/pages/accountMan/index?params=" + JSON.stringify(this.options)
				})
			},
			handleClick() {
				if (this.JTH5_code_switch) {
					uni.navigateTo({
						url: "/pages/authentication/index"
					})
				} else {
					uni.navigateTo({
						url: "/pages/realNameAuth/index"
					})
				}

			},
			//查询字典
			async getDictOne(code) {
				let res = await this.api.getDictOne(code);
				return res.data.data.dictValue;
			},
			//充值
			async toRecharge() {
				this.realAuthInfo = await this.realAuthDetail();
				if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
					uni.$u.toast("您当前未实名，请先实名认证！")
					return;
				}
				uni.navigateTo({
					url: "/pages/reCharge/index"
				})
			},
			//提现
			async toWithdrawal() {
				this.realAuthInfo = await this.realAuthDetail();
				if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
					uni.$u.toast("您当前未实名，请先实名认证！")
					return;
				}
				uni.navigateTo({
					url: "/pages/withdrawal/index"
				})
			},
			//账单
			async toBill() {
				this.realAuthInfo = await this.realAuthDetail();
				uni.navigateTo({
					url: '/pages/bill/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		margin: 20rpx;
	}

	.postionAll {
		background-color: #15298C;
		border-radius: 20rpx;
		padding: 25rpx 30rpx;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 5rpx;
		margin: 10rpx 0rpx;
	}

	.top-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.middle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0rpx;
	}

	.shiming {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.36);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.shiming-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-right: 5rpx;
	}

	.money {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 54rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.bottom {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		margin: 20rpx 0rpx;
	}

	.bottom-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom-top-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.line {
		border: 2rpx solid rgba(216, 216, 216, 0.1);
		margin: 20rpx 0rpx;
	}

	.bottom-line {
		margin: 30rpx 0rpx;
	}

	.bottom-line-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom-line-top-left {
		display: flex;
		align-items: center;
	}

	.bottom-line-top-right {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.bottom-line-top-text {
		margin-left: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.bottom-line-top-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 48rpx;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.menu {
		margin-top: 40rpx;

		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 30rpx;

			.menu-item-left {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.menu-text {
			margin-left: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
</style>